﻿/// <reference path="Panel.js" />
/// <reference path="SliderBar.js" />
/// <reference path="../Utility/ColorHelper.js" />

//颜色面板有颜色显示区和三个颜色滚动条组成
IM.Control.ColorPanel = function() {
    IM.Control.Panel.apply(this, arguments);
    this.ColorArea; //颜色显示区
    this.RedSliderBar; //红色滑动条
    this.GreenSliderBar; //绿色滑动条
    this.BlueSliderBar; //蓝色滑动条
    this.Color = "#000000"; //当前的颜色
    this.IsVisible; //是否可视

    //颜色选择确定事件
    this.OnColorSelected;

    this.Show = function() {
        this.Render.show();
        this.IsVisible = true;
    };

    this.Hide = function() {
        this.Render.hide();
        this.IsVisible = false;
    };

    this.ColorPanelInit = function() {
        this.Render.attr("unselectable", "on");
        this.Render.css({ "padding": 10, "border": "1px solid #d0e0f0", "width": 200, "height": 108 });
        this.ColorArea = $("<div  unselectable='on'>点击确定</div>").height(30).width(80).css({ "background-color": "black", "margin": "10px auto", "color": "white", "padding-top": 20, "text-align": "center", "cursor": "pointer" });
        var red = $("<div  unselectable='on'></div>").css({ "border-color": "red", "margin-top": 10, "position": "relative" });
        var green = $("<div  unselectable='on'></div>").css({ "border-color": "green", "margin-top": 10, "position": "relative" });
        var blue = $("<div  unselectable='on'></div>").css({ "border-color": "blue", "margin-top": 10, "position": "relative" });

        this.Render.append(this.ColorArea);
        this.Render.append(red);
        this.Render.append(green);
        this.Render.append(blue);

        this.RedSliderBar = new IM.Control.SliderBar({ Render: red, MaxValue: 255 });
        this.GreenSliderBar = new IM.Control.SliderBar({ Render: green, MaxValue: 255 });
        this.BlueSliderBar = new IM.Control.SliderBar({ Render: blue, MaxValue: 255 });

        //滚动滑动条改变颜色
        var onscroll = (function(obj) {
            return function() {
                obj.Color = IM.ColorHelper.RGB2Color(obj.RedSliderBar.Value, obj.GreenSliderBar.Value, obj.BlueSliderBar.Value);
                obj.ColorArea.css("background-color", obj.Color);
                obj.ColorArea.css("color", IM.ColorHelper.RGB2Color(Math.abs(130 - obj.RedSliderBar.Value) + 80, Math.abs(130 - obj.GreenSliderBar.Value) + 80, Math.abs(130 - obj.BlueSliderBar.Value) + 80));
            };
        })(this);

        this.RedSliderBar.OnScroll = this.GreenSliderBar.OnScroll = this.BlueSliderBar.OnScroll = onscroll;

        //鼠标离开面板，点击其它地方，面板隐藏
        var isOut = false;
        this.Render.hover(function() { isOut = false; }, function() { isOut = true; });
        var bodyMouseDown = (function(obj) {
            return function() {
                if (isOut)
                    obj.Hide();
            };
        })(this);
        $(document.body).bind("mousedown", bodyMouseDown);

        this.ColorArea.bind("click", (function(obj) { return function(e) { if (typeof obj.OnColorSelected != "undefined") obj.OnColorSelected(); obj.Hide(); e.originalEvent.cancelBubble = true; }; })(this));

        if (this.IsVisible)
            this.Show();
        else
            this.Hide();
    };
    this.ColorPanelInit();
};